<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src="js/jquery-3.1.1.js">
        
    </script>
    <style>
        #box{
            width: 520px;
            height: 280px;
            overflow: hidden;
            margin: 10px auto;
            position: relative;
            text-align: center;
            cursor: pointer;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #ul1 li{
            width: 520px;
            height: 280px;
        }
        #ul2{
            position: absolute;
            bottom: 10px;
            left:10px;
            overflow: hidden;
        }
        img{
            width: 100%;
            height: 100%;
        }
         li{
            float: left;
            width: 20px;
            height: 20px;
            background-color: black;
            opacity: 0.8;
            margin: 5px;
            color: white;
        }
        #ul3 {
            position: absolute;
            right:10px;
            bottom: 10px;         
            overflow: hidden;   
        }
      
    </style>
</head>
<body>
    <div id="box">
    <ul id="ul1">
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/4.jpg" alt=""></li>
        <li><img src="img/5.jpg" alt=""></li>
    </ul>
    <ul id="ul2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul id="ul3">
        <li>&lt;</li>
        <li>&gt;</li>
    </ul>
    
    </div>
</body>
</html>
<script>
$(function(){


    var timer = null;
    var current = 0;
    timer = setInterval(autoplay,1000)
   function autoplay(){
       current ++;
       if(current >=$('#ul1 li').length){
           current = 0;
       }
       $($('#ul1 li')[current]).show().siblings().hide();
       
   }

   $('#ul2 li').each(function(index){
       $(this).click(function(){
           var num  = $(this).index();
           console.log(num)
       $($('#ul1 li')[num]).show().siblings().hide();
       current = num;
       })
   })

    $($('#ul3 li')[0]).click(function(){
        current= current - 1;
        if(current <0){
            current = $('#ul1 li').length - 1;
        }
        $($('#ul1 li')[current]).show().siblings().hide();
        
    })
    $($('#ul3 li')[1]).click(function(){
        current ++;
        if(current >=$('#ul1 li').length){
            current = 0;
        }
        $($('#ul1 li')[current]).show().siblings().hide()
        
    })
   $('#box').mouseover(function(){
       clearInterval(timer);
   })
   $('#box').mouseout(function(){
       timer = setInterval(autoplay,1000)
   })

 
})
</script>